import { GridContent } from '@ant-design/pro-layout';
import { InfoCircleOutlined } from '@ant-design/icons';
import { ChartCard } from './components/Charts';
import React, { useState, useEffect, Suspense } from 'react';
import { Col, Row, Tooltip } from 'antd';
import { FormattedMessage, getLocale } from 'umi';
import { getDeviceNum } from './../ServerAssterList/service';
import { getSpeedNum } from '@/services/dashboard';
import { getQuickLoginList } from '@/services/dashboard';

const ServerChart = React.lazy(() => import('./components/ServerChart'));
const SpeedNum = React.lazy(() => import('./components/SpeedNum'));
const QuickLogin = React.lazy(() => import('./components/QuickLogin'));

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: { marginBottom: 24 },
};

const Dashboard = () => {
  const [accestsloading, setAccestsloading] = useState(false);
  const [accestsNum, setAccestsNum] = useState([]);
  const [quickLoginList, setQuickLoginList] = useState([]);
  const [serverPieData, setServerPieData] = useState([]);
  const [speedData, setSpeedData] = useState([]);
  const [speedType, setSpeedType] = useState('1');
  const [speedTypeLoading, setSpeedTypeLoading] = useState(false);
  const [quickLoginLoading, setQuickLoginLoading] = useState(false);
  const handleChangeSpeedType = (e) => {
    setSpeedType(e.target.value);
  };

  let chartData = [];

  useEffect(() => {
    setAccestsloading(true);
    setQuickLoginLoading(true);
    getDeviceNum().then((res) => {
      if (res.status === 200) {
        setAccestsNum(res.data);
        setAccestsloading(false);
        getServerPieData(res.data);
      }
    });
    getQuickLoginList().then((res) => {
      if (res.code === 200) {
        setQuickLoginLoading(false);
        setQuickLoginList(res.data);
      }
    });
  }, []);

  function getServerPieData(data) {
    for (var xyi in data) {
      if (xyi !== 'total') {
        chartData.push({
          x: xyi,
          y: data[xyi],
        });
      }
    }
    setServerPieData(chartData);
  }

  useEffect(() => {
    setSpeedTypeLoading(true);
    getSpeedNum({ interval: speedType }).then((res) => {
      if (res.status === 200) {
        setSpeedData(res.data);
        setSpeedTypeLoading(false);
      }
    });
  }, [speedType]);

  // @ts-ignore
  return (
    <GridContent>
      <Row gutter={24} type="flex">
        <Col {...topColResponsiveProps}>
          <ChartCard
            bordered={false}
            title={getLocale() === 'zh-CN' ? '总资产数' : 'Total Num'}
            action={
              <Tooltip title={getLocale() === 'zh-CN' ? '总的服务器数量' : 'Total server num'}>
                <InfoCircleOutlined />
              </Tooltip>
            }
            loading={accestsloading}
            total={() => accestsNum.total}
            footer={<a href={'/asster/server'}>{getLocale() === 'zh-CN' ? '详情' : 'detail'}</a>}
            contentHeight={46}
          />
        </Col>

        <Col {...topColResponsiveProps}>
          <ChartCard
            bordered={false}
            title={getLocale() === 'zh-CN' ? '私有云' : 'self-cloud'}
            action={
              <Tooltip title={getLocale() === 'zh-CN' ? '私有云服务器数量' : 'self server num'}>
                <InfoCircleOutlined />
              </Tooltip>
            }
            loading={accestsloading}
            total={() => accestsNum.self}
            footer={
              <a href={'/asster/server?area=self'}>{getLocale() === 'zh-CN' ? '详情' : 'detail'}</a>
            }
            contentHeight={46}
          ></ChartCard>
        </Col>

        <Col {...topColResponsiveProps}>
          <ChartCard
            bordered={false}
            title={getLocale() === 'zh-CN' ? '阿里云' : 'ali-cloud'}
            action={
              <Tooltip title={getLocale() === 'zh-CN' ? '阿里云服务器数量' : 'ali server num'}>
                <InfoCircleOutlined />
              </Tooltip>
            }
            loading={accestsloading}
            total={() => accestsNum.ali}
            footer={
              <a href={'/asster/server?area=ali'}>{getLocale() === 'zh-CN' ? '详情' : 'detail'}</a>
            }
            contentHeight={46}
          ></ChartCard>
        </Col>

        <Col {...topColResponsiveProps}>
          <ChartCard
            bordered={false}
            title={getLocale() === 'zh-CN' ? '亚马逊云' : 'aws-cloud'}
            action={
              <Tooltip title={getLocale() === 'zh-CN' ? '亚马逊云服务器数量' : 'aws server num'}>
                <InfoCircleOutlined />
              </Tooltip>
            }
            loading={accestsloading}
            total={() => accestsNum.aws}
            footer={
              <a href={'/asster/server?area=aws'}>{getLocale() === 'zh-CN' ? '详情' : 'detail'}</a>
            }
            contentHeight={46}
          ></ChartCard>
        </Col>
      </Row>

      <Row
        gutter={24}
        style={{
          marginTop: 24,
        }}
      >
        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
          <Suspense fallback={null}>
            <QuickLogin loading={quickLoginLoading} quickLoginList={quickLoginList} />
          </Suspense>
        </Col>
        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
          <Suspense fallback={null}>
            <SpeedNum
              loading={speedTypeLoading}
              speeddata={speedData}
              speedType={speedType}
              handleChangeSpeedType={handleChangeSpeedType}
            />
          </Suspense>
        </Col>
        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
          <Suspense fallback={null}>
            <ServerChart
              loading={accestsloading}
              serverPieTotal={accestsNum.total}
              serverPieData={serverPieData}
            />
          </Suspense>
        </Col>
      </Row>
    </GridContent>
  );
};

export default Dashboard;
